<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="外部样式引入CSS文件.css">
    <title>Document</title>
</head>

<body>
    <style>
        /*标签选择器*/
        p {
            /* 设置字体颜色 */
            color: red;
            /* 设置字体大小 */
            font-size: 30px;
        }


        /*类选择器*/
        .blue {
            color: blue;
        }

        /*使用多个类名*/
        .box {
            width: 200px;
            height: 150px;
        }

        .red {
            background-color: red;
        }


        /*ID选择器：id是唯一的*/
        #ha {
            color: red;
        }


        /*后代选择器 选择某个父元素中的某个子元素*/
        ol li {
            color: rgb(0, 255, 98);
        }

        /*只要是它的子类元素都可以*/
        ul li a {
            color: yellow;
        }

        /*随意组合*/
        .one li a {
            color: green;
        }

        /*子代选择器 只选亲儿子, 不选孙子元素*/
        .two>a {
            color: red;
        }


        /*伪类选择器*/

        /*选择未被访问过的链接*/
        a:link {
            color: black;
            /* 去掉 a 标签的下划线 */
            text-decoration: none;
        }

        /*选择已经被访问过的链接*/
        a:visited {
            color: green;
        }

        /*选择鼠标指针悬停上的链接*/
        a:hover {
            color: red;
        }

        /*选择活动链接(鼠标按下了但是未弹起)*/
        a:active {
            color: blue;
        }


        /* :force 伪类选择器*/
        .three>input:focus {
            color: red;
        }
    </style>

    <p>hello</p>

    <div style="color:green">想要生活过的去, 头上总得带点绿</div>

    <div>上帝为你关上一扇门, 然后就去睡觉了</div>

    <div class="blue">咬人猫</div>

    <div class="box red"></div>

    <div id="ha">蛤蛤蛤</div>

    <ol>
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>

    <ol class="one">
        <li>ddd</li>
        <li>eee</li>
        <li><a href="#">fff</a></li>
        <li><a href="#">fff</a></li>
        <li><a href="#">fff</a></li>
    </ol>

    <div class="two">
        <a href="#">链接1</a>
        <p><a href="#">链接2</a></p>
    </div>

    <a href="#">谭臣</a>

    <div class="three">
        <input type="text">
    </div>
</body>

</html>